﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=620">
    <link rel="stylesheet" type="text/css" href="/rsc/css/fourkill.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery.mobile.custom.min.js"></script>    
    <script src="selfish.js"></script>
    <script src="fourkill.util.js"></script>
    <script src="fourkill.painters.js"></script>
    <script src="fourkill.objects.js"></script>
    <script src="fourkill.activeobjects.js"></script>
    <script src="fourkill.input.new.js"></script>
    <title>Input Testing!</title>

    <script>

        function serializeObject(obj, level) {
            level = level == null ? 0 : level;
            var s = "", p = "", v;
            for (var i = 0; i < level; i++) p += "\t";
            if (obj == null) s = "[null]";
            else {
                for (var key in obj) {
                    v = obj[key];
                    if (v == null) v = "[null]";
                    else if (typeof (v) == "function") v = "[function]";

                    s += p + key + "(" + typeof (v) + ") = " + v + "\r\n";
                    if (typeof (v) == "object") s += serializeObject(v, level + 1);
                }
            }
            return s;
        }

        function TestInputHandler() {
            this.log = function(txt) {
                $("#divOutput").prepend(txt);
            };
            this.getColor = function (eventName) {
                var c = "black";
                switch (eventName) {
                    case "gps":
                        c = "purple";
                        break;
                    case "keydown":
                        c = "blue";
                        break;
                    case "keyup":
                        c = "green";
                        break;
                    case "orientation":
                        c = "orange";
                        break;
                    case "vclick":
                        c = "red";
                        break;
                    case "tap":
                        c = "cyan";
                        break;
                    case "taphold":
                        c = "darkred";
                        break;
                    case "swipe":
                        c = "darkblue";
                        break;
                }
                return c;
            };
            this.fireEvent = function(eventName, data) {
                this.log("<pre><span style='color:" + this.getColor(eventName) + "'>============[[[" + eventName + "]]]============\r\n" + serializeObject(data)) + "</span></pre>";
            };
        }

        var ih = new TestInputHandler();
        $(document).bind("pageinit", function () {
            $(".ui-loader").hide();
            $("#btnClear").click(function (e) { $("#divOutput").html("");});
            $("input[type=checkbox]").change(function (e) {
                var ih = null;
                switch ($(this).attr("id")) {
                    case "chkGps":
                        ih = GlobalInputHandlers.Gps;
                        break;
                    case "chkCompass":
                        ih = GlobalInputHandlers.Orientation;
                        break;
                    case "chkTap":
                        ih = GlobalInputHandlers.Tap;
                        break;
                    case "chkKeyboard":
                        ih = GlobalInputHandlers.Keyboard;
                        break;
                    case "chkObjectLocation":
                        ih = GlobalInputHandlers.ObjectLocation;
                        break;
                }

                if (ih != null) {
                    if ($(this).is(":checked")) ih.setup();
                    else ih.teardown();
                }
            });

            GlobalInputHandlers.Keyboard.subscribe("test", ih);
            GlobalInputHandlers.Gps.subscribe("test", ih);
            GlobalInputHandlers.Orientation.subscribe("test", ih);
            GlobalInputHandlers.Tap.subscribe("test", ih);
            GlobalInputHandlers.ObjectLocation.subscribe("test", ih);
        });
    </script>
</head>
<body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding: 0;">
    <input type="button" id="btnClear" value="Clear"/>
    <span style="border:1px inset gray;padding:2px;"><input type="checkbox" id="chkObjectLocation"/>ObjectLocation</span>
    <span style="border:1px inset gray;padding:2px;"><input type="checkbox" id="chkGps"/>GPS</span>
    <span style="border:1px inset gray;padding:2px;"><input type="checkbox" id="chkCompass"/>Compass</span>
    <span style="border:1px inset gray;padding:2px;"><input type="checkbox" id="chkTap"/>Tap</span>
    <span style="border:1px inset gray;padding:2px;"><input type="checkbox" id="chkKeyboard"/>Keyboard</span>
    <div id="divOutput" style="width:100%; height:90%;"></div>
</body>
</html>
